﻿Fx.implement({
	step: function(){
		var time = $time();
		if (time < this.time + this.options.duration){
			var delta = this.options.transition((time - this.time) / this.options.duration);
			this.set(this.compute(this.from, this.to, delta));
			this.fireEvent('step', this.subject);
		} else {
			this.set(this.compute(this.from, this.to, 1));
			this.complete();
		}
	}
});

mapl.overlay = null;

mapl.classes.Overlay = new Class({

	content:null,
	overlay:null,
	overlayContent:null,
	overlayContainer:null,
	openAnim:null,
	callBacks:{},

	initialize:function(content,color,callbacks,args){
	
		/* Check Args */
		if(mapl.overlay){
			mapl.overlay.close();
		};
		
		mapl.overlay = this;
		
		if(!$type(color)){
			color=mapl.colors.background;
		};
		if(!$type(content)){
			this.content = new Element('div');
		}else{
			this.content = content;
		};
		if($type(callbacks)){
			this.callbacks = callbacks;
		};
				
		/* Window Generation */
		this.overlay = new Element('div',{'class':'overlay','styles':{background:color,height:window.getHeight()}}).inject($$('body')[0],'top');
		this.overlay.set('opacity',.55);
		this.overlayContainer = new Element('div',{'class':'overlay-container','styles':{'top':window.getHeight()/2,'left':(window.getWidth()-this.content.getSize().x)/2}}).inject($$('body')[0],'top');
		new Element('div',{'class':'float-tl'}).set('html','<div class="float-tr float-tr-close"><div class="float-tm"></div></div>').inject(this.overlayContainer);
		this.overlayContent = new Element('div',{'class':'float-mm'}).inject(new Element('div',{'class':'float-mr'}).inject(new Element('div',{'class':'float-ml'}).inject(this.overlayContainer)));
		new Element('div',{'class':'float-bl'}).set('html','<div class="float-br"><div class="float-bm"></div></div>').inject(this.overlayContainer);
		
		/* Add Events */
		window.addEvent('resize',this.position.bind(this));
		window.addEvent('scroll',this.position.bind(this));
		this.overlayContainer.getElement('.float-tr-close').addEvent('click',this.close.bind(this));
		this.overlay.addEvent('click',this.close.bind(this));
				
		this.content.set('opacity',0);
		this.content.inject(this.overlay);
		
		this.openAnim = new Fx.Morph(this.overlayContent, {transition: Fx.Transitions.Cubic.easeOut,duration:600});
		this.openAnim.addEvent('step',this.position.bind(this));
		this.openAnim.addEvent('complete',function(){
			this.content.inject(this.overlayContent);
			new Fx.Morph(this.content, {transition: Fx.Transitions.Cubic.easeOut,duration:300}).start({opacity:1});
			if($type(callbacks)){
				if($type(callbacks.onOpen)){
					callback.onOpen();
				}
			}
		}.bind(this));
		this.openAnim.start({width:[0,this.content.getWidth()],height:[0,this.content.getHeight()]});

		if($type(callbacks)){
			if($type(callbacks.onCreate)){
				callback.onCreate();
			}
		}
	},
	close:function(){
		window.removeEvent('resize',this.position);
		window.removeEvent('scroll',this.position);
		this.overlay.destroy();
		this.overlayContainer.destroy();
		if($type(this.callbacks)){
			if($type(this.callbacks.onClose)){
				this.callbacks.onClose();
			}
		}
	},
	position:function(){
		if(window.getHeight()>this.overlayContainer.getHeight()){
			this.overlayContainer.setStyles({top:((window.getHeight()-this.overlayContainer.getHeight())/2+window.getScrollTop()),left:(window.getScrollWidth()-this.overlayContainer.getWidth())/2});
		}else{
			if((window.getHeight()-this.overlayContent.getSize().y)/2+window.getScrollTop()<0){this.overlayContent.open.cancel();this.overlayContent.open.start({top:'20px'})}
			this.overlayContainer.setStyles({width:this.overlayContent.getSize().x+'px',left:(window.getScrollWidth()-this.overlayContent.getSize().x)/2});
		}
		this.overlay.setStyles({height:window.getScrollHeight()});
	}
});